onload = function() {
    startTest() ;
};

var repeat_count = 5 ;
var already_clicked = 0 ;

var image_base_path="images/tests" ;
var number_of_image_folders = 7 ;

var image_filename = new Array (
	"",
	"",
	"",
	""
) ;

function startTest() {

    var img = Array (
	"0.jpg" ,
	"1.jpg" ,
	"2.jpg" ,
	"3.jpg"
    ) ;

    image_folder_idx = Math.floor(Math.random() * number_of_image_folders) ;
    console.log(image_folder_idx) ;

    for (i = 0;i < 4;i++) {
	image_filename[i] = image_base_path + "/" + image_folder_idx + "/" + img[i] ;
    }

    if (repeat_count-- > 0) {
	already_clicked = 0 ;
	clearImage() ;
	setTimeout('drawBaseImage()', 1000) ;
    }
}

function drawFrame() {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineWidth = 5 ;
    ctx.strokeRect(20,   20, 240, 240) ;
    ctx.strokeRect(20+240,  20, 240, 240) ;
    ctx.strokeRect(20,  20+240, 240, 240) ;
    ctx.strokeRect(20+240, 20+240, 240, 240) ;
    ctx.closePath();
}

function drawOneImage(ctx, image_path, idx) {

    var left_top = new Array (
	[40,        40] , /* idx = 0 */
	[20+240+20, 40] , /* idx = 1 */
	[40,        20+240+20] , /* idx = 2 */
	[20+240+20, 20+240+20]  /* idx = 3 */
    ) ;
    var img = new Image();

    img.src = image_path;
    img.onload = function() {
	ctx.drawImage(img, left_top[idx][0], left_top[idx][1], 200, 200);
    }
}

const pattern_table = new Array (
    [0, 1, 2, 3], [0, 1, 3, 2], [0, 2, 1, 3], 
    [0, 2, 3, 1], [0, 3, 1, 2], [0, 3, 2, 1],  

    [1, 0, 2, 3], [1, 0, 3, 2], [1, 2, 0, 3], 
    [1, 2, 3, 0], [1, 3, 0, 2], [1, 3, 2, 0],  

    [2, 1, 0, 3], [2, 1, 3, 0], [2, 0, 1, 3], 
    [2, 0, 3, 1], [2, 3, 1, 0], [2, 3, 0, 1],  

    [3, 1, 2, 0], [3, 1, 0, 2], [3, 2, 1, 0], 
    [3, 2, 0, 1], [3, 0, 1, 2], [3, 0, 2, 1]
) ; 

var pattern_idx = -1 ;
var question_mark = -1 ;
var answer_idx = -1 ;

function drawBaseImage() {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');

    
    drawFrame();

    pattern_idx = Math.floor(Math.random() * 24) ;

    for (i = 0;i < 4;i++) {
	drawOneImage(ctx, image_filename[i], pattern_table[pattern_idx][i]) ;    
    }
    setTimeout('startNextImage()', 2000) ;
}

function clearImage() {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');
    var img = new Image();

    img.src = "images/blank.jpg" ;
    img.onload = function() {
	ctx.drawImage(img, 0, 0, 600, 600) ;
    }
//    setTimeout('drawImageWithQuestionmark()', 1000) ;
}

function startNextImage() {
    clearImage() ;
    setTimeout('drawImageWithQuestionmark()', 1000) ;
}

function drawImageWithQuestionmark() {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');

    question_mark = Math.floor(Math.random() * 4) ;

    drawFrame() ;
    for (i = 0;i < 4;i++) {
	if (question_mark == i) {
	    drawOneImage(ctx, "images/q.jpg", pattern_table[pattern_idx][i]) ;    
	} else {
	    drawOneImage(ctx, image_filename[i], pattern_table[pattern_idx][i]) ;    
	}
    }
    setTimeout('drawChoice()', 2000) ;
}

function drawOneNumber(ctx, image_path, idx) {

    var left_top = new Array (
	[20,     20] , /* idx = 0 */
	[240+20, 20] , /* idx = 1 */
	[20,     240+20] , /* idx = 2 */
	[240+20, 240+20]  /* idx = 3 */
    ) ;
    var img = new Image();

    img.src = image_path;
    img.onload = function() {
	ctx.drawImage(img, left_top[idx][0], left_top[idx][1], 40, 40);
    }
}

var already_clocked = 0 ;

function drawChoice() {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');
    var q = Math.floor(Math.random() * 4) ;
    ctx.clearRect(0, 0, 600, 600) ;
    p = Math.floor(Math.random() * 24) ;

    for (i = 0;i < 4;i++) {
	drawOneImage(ctx, image_filename[i], pattern_table[p][i]) ;    
    }

    answer_idx = pattern_table[p][question_mark] ;
    console.log(answer_idx) ;
    var img = new Image();
    var number_filename = new Array (
	"images/n1.jpg",
	"images/n2.jpg",
	"images/n3.jpg",
	"images/n4.jpg"
    ) ;
    for (i = 0;i < 4;i++) {
	drawOneNumber(ctx, number_filename[i], i) ;    
    }
    document.addEventListener("click",function(event) {
	if (!already_clicked) {
	    drawRectAtClickedPos(event, ctx) ;
	}
    })
}



function drawRectAtClickedPos(ev, ctx) {
    var canvas = document.getElementById('canvassample');
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    var ctx = canvas.getContext('2d');

    var posX = ev.pageX,
        posY = ev.pageY ;

    var clicked_pos = -1 ;
    if (20 <= posX && posX <= 240) {
	clicked_pos = 0 ;
    } else {
	if (20+240 <= posX && posX <= 20+240+240) {
	    clicked_pos = 1 ;
	}
    }
    if (clicked_pos != -1) {
	if (20 <= posY && posY <= 240) {
	} else {
    	    if (20+240 <= posY && posY <= 20+240240) {
		clicked_pos += 2 ;
	    } else {
		clicked_pos = -1 ;
	    }
	}
    }
    if (clicked_pos == -1) {
	return ; 
    }
    img = new Image() ;

    if (clicked_pos == answer_idx) {
	img.src = "images/yes.png" ;
    } else {
    	img.src = "images/no.png" ;
    }
    img.onload = function() {
	ctx.drawImage(img, 20+60, 20+60, 320, 320) ;
    }
    already_clicked = 1 ;
    setTimeout('startTest()', 2000) ;
};

